import React, {Component} from 'react'
import {View, TouchableOpacity} from 'react-native'

import Icon from "react-native-vector-icons/FontAwesome";
import musicServer from "../http/musicServer";

const cStyle = {
  wrap: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: 10,
  },
  btns: {
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: '#fa541c',
    borderRadius: 4,
    marginLeft: 4,
    marginRight: 4,
    paddingLeft: 30,
    paddingRight: 30,
    paddingTop: 5,
    paddingBottom: 5,
  }
}
export class MusicControl extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return <View style={cStyle.wrap}>
      {
        !!this.props.conf.lists && !!this.props.conf.lists.length &&
        <TouchableOpacity style={cStyle.btns} onPress={() => this.props.conf.prevSong()}>
          <Icon name={'angle-left'} size={24} color={'#fa541c'}/>
        </TouchableOpacity>
      }
      <TouchableOpacity style={cStyle.btns} onPress={() => this.props.conf.toggle()}>
        <Icon name={this.props.paused ? 'caret-up' : 'caret-right'} size={24} color={'#fa541c'}/>
      </TouchableOpacity>
      {
        !!this.props.conf.lists && !!this.props.conf.lists.length &&
        <TouchableOpacity style={cStyle.btns} onPress={() => this.props.conf.nextSong()}>
          <Icon name={'angle-right'} size={24} color={'#fa541c'}/>
        </TouchableOpacity>
      }
    </View>
  }
}

// 上一曲 下一曲
export function MusicControlConf (scope, keyPath = 'popUnionConf') {
  this.curUrl = undefined;
  this.curSong = null;
  this.lists = [];
  this.scope = scope;
  this.paused = false;
  this.keyPath = keyPath;
  this.likeList = [];
}

MusicControlConf.prototype.nextSong = function () {
  const index = this.curSong ? this.lists.findIndex(item => item === this.curSong) : -1;
  const next = this.lists[index + 1];
  if (!next) return;
  this.playSong(next);
}
MusicControlConf.prototype.prevSong = function () {
  const index = this.curSong ? this.lists.findIndex(item => item === this.curSong) : 1;
  const next = this.lists[(index - 1 + this.lists.length) % this.lists.length];
  if (!next) return;
  this.playSong(next);
}

MusicControlConf.prototype.playSong = function (song) {
  this.curSong = song;
  musicServer.songUrl({id: song.id})(res => {
    this.curUrl = res.data[0].url
    this.setState()
  })
}
MusicControlConf.prototype.setPlayList = function (list) {
 if (list && list instanceof Array) {
   this.lists = list;
   const first = list[0];
   const cur = this.curSong && this.lists.find(item => item.id === this.curSong.id);
   if (cur) {
     this.setState()
   } else if (first) {
     this.curSong = first;
     this.playSong(first)
   }
 }
}
MusicControlConf.prototype.setLikeList = function (list) {
  if (list && list instanceof Array) {
    this.likeList = list;
    this.setState();
  }
}
MusicControlConf.prototype.play = function () {
  this.paused = false;
  this.setState();
}
MusicControlConf.prototype.pause = function () {
  this.paused = true;
  this.setState();
}
MusicControlConf.prototype.toggle = function () {
  this.paused = !this.paused;
  this.setState();
}
MusicControlConf.prototype.setState = function () {
  const state = {};
  state[this.keyPath] = this;
  this.scope.setState(state);
}
MusicControlConf.prototype.likeSong = function(song) {
  musicServer.like({id: song.id})(res => {
    this.likeList.includes(song.id) || this.likeList.push(song.id);
    this.setState()
  });
}
export default MusicControl
